<template>
  <div class="shop">
     <shop-header></shop-header>
     <div class="tab">
        <div class="tab-item">
          <router-link to="/shop/goods" replace :class="$route.fullPath === ('/shop/goods') ? 'active' : ''">商品</router-link>
        </div>
        <div class="tab-item">
          <router-link to="/shop/score" replace :class="$route.fullPath === ('/shop/score') ? 'active' : ''">评价</router-link>
        </div>
        <div class="tab-item">
          <router-link to="/shop/merchants" replace :class="$route.fullPath === ('/shop/merchants') ? 'active' : ''">商家</router-link>
        </div>
     </div>
     <router-view></router-view>
  </div>
</template>

<script>
import ShopHeader from '../../components/content/shopheader/ShopHeader'
export default {
  data () {
    return {
       
    };
  },
  mounted(){
    this.$store.dispatch('getShopGoods')
    this.$store.dispatch('getShopScore')
    this.$store.dispatch('getShopInfo')
  },
  components:{
    ShopHeader
  }
}
</script>
<style lang='less' scoped>
.shop{
  .tab{
    height: 40px;
    line-height: 40px;
    background: #fff;
    .tab-item{
      float: left;
      width: 33.33333%;
      text-align: center;
      font-size: 14px;
      color: rgb(77, 85, 93);
      a{
        display: block;
        position: relative;

        &.active{
          color: #02a774;
          &::after{
            content: '';
            position: absolute;
            left: 50%;
            bottom: 1px;
            width: 35px;
            height: 2px;
            transform: translateX(-50%);
            background: #02a774;
          }
        }
      }
    }
  }
    
      
        
}
</style>